<template>
  <div class="page-box">
    <div class="working-box">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="工作日设置" name="workForm">
          <workForm></workForm>
        </el-tab-pane>
        <el-tab-pane label="其他设置" name="otherForm">
          <other-form></other-form>
        </el-tab-pane>
      </el-tabs>
      <!-- <Transition name="fade" mode="out-in">
            <component :is="activeComponent"></component>
          </Transition> -->
    </div>
  </div>
</template>

<script setup name="more">
import workForm from './work.vue'
import otherForm from './other.vue'
const activeName = ref('workForm')
</script>
<style lang="scss" scoped>
.page-box {
  padding: 12px 24px 20px 24px;
  display: block;
  width: 100%;
  margin-bottom: 10px;
  background: #fff;
  .working-box {
    display: block;
    border: 1px solid #eee;
    margin-top: 70px;
    width: 100%;
  }
}
F :deep .el-tabs__nav-wrap::after {
  // position: static !important;
}
/*去掉el-tab-pane切换时的蓝色下划线*/
:deep .el-tabs__active-bar {
  background: transparent;
}
:deep .el-tabs__header {
  // height: 52px;
  width: 100%;
  border-bottom: 1px solid #eee;
}
:deep .el-tabs__item {
  padding: 6px 25px;
  font-weight: 600;
  font-size: 13px;
}
:deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding: 0px 25px 30px 40px;
}
</style>
